<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTool>
        <template #after>
          <el-button type="primary" @click="addFn">添加员工</el-button>
        </template>
      </PageTool>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="用户名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="操作" width="300">
          <template v-slot="{row}">
            <el-button size="small" type="primary" @click="szPage(row.id)">设置角色</el-button>
            <el-button size="small" @click="bjPage(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 确认添加弹框组件 -->
      <DaiLog ref="DaiLog" :dialog-visible.sync="showDialog" @updateList="getPage" />
      <!-- 分页组件 -->
      <el-card>
        <el-row type="flex" justify="center">
          <el-pagination
            layout="total, prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <Juese ref="Juese" :dialog-juese.sync="dialogJuese" />
    </div>
  </div>
</template>
<script>
import { getPage, delPage, zdPage, slPage } from '@/api/staff'
import DaiLog from './components/dialog.vue'
import Juese from './components/Juese.vue'

export default {
  components: { DaiLog, Juese },
  data() {
    return {
      tableData: [],
      limit: 8,
      start: 0,
      dialogJuese: false,
      showDialog: false,
      total: 0
    }
  },

  async created() {
    this.getPage()
  },
  methods: {
    // 渲染列表
    async getPage() {
      const res = await getPage({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(57, res)
      this.tableData = res.data
      // this.total = this.tableData.length
      //   console.log(this.total)
      // 获取用户数量
      const result = await slPage()
      this.total = result.data
      // console.log(result)
    },
    // 编辑
    async bjPage(id) {
      this.addFn()
      const res = await zdPage(id)
      this.$refs.DaiLog.formData = res.data
    },
    // 删除员工
    delFn(id) {
      this.$confirm('确定删除吗？', '删除', {
        type: 'warning'
      })
        .then(async() => {
          // 调用接口
          await delPage(id)
          // 刷新列表
          this.getPage()
        })
        .catch(() => {
          console.log('点击了取消按钮')
        })
    },
    // 显示弹窗
    addFn() {
      this.showDialog = true
    },
    // 分页
    changePage(page) {
      this.start = (page - 1) * this.limit
      this.getPage()
    },
    // 设置角色
    async szPage(id) {
      const res = await zdPage(id)
      // 因为拿到是个数组 拿到只有title的数组
      const arr = res.data.roles
      const newarr = []
      arr.forEach(item => {
        newarr.push(item.id)
      })
      this.$refs.Juese.userId = id
      this.$refs.Juese.checkList = newarr
      this.dialogJuese = true
    }
  }
}
</script>
<style>
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
